<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面(Vue)</title>



</head>
<body>
     <div id="app">

         <div class="login-box">

             <div>
                 用户名:<input v-model="user.username">
             </div>

             <div>
                 密码:<input v-model="user.password">
             </div>

             <div>
                 <button @click="btnLoginClick">登录</button>
             </div>
         </div>
     </div>
</body>
<script src="../../lib/vue.global.js"></script>
<script src="../../lib/axios.js"></script>
<script>

      const  app = {
          data(){
              return{
                 user:{
                     username:'test',
                     password:''
                 }

              }
          },methods:{
               btnLoginClick(){
                   axios({
                        url:'http://localhost:8080/user/login',
                        method:'post',
                        //dataType:'text',
                        dataType:'json',
                        params:this.user
                   }).then((res)=>{


                     //  JSON.parse(res.data);
                       // if(res.data){
                       //      window.location.href = "/index.html";
                       // }else {
                       //      alert("用户名或者密码错误！");
                       // }

                       console.log(res.data);

                       if(res.data.success){
                           window.location.href = "/index.html";
                       }else {
                           alert("用户名或者密码错误！");
                       }
                   })


               }
          }
      }

      /**
       *  vue2如何创建vue实例
       * */
      Vue.createApp(app).mount('#app');

</script>

</html>